<template>
	<view>
		<view class="header">
			<image @click="back" class="back" src="../../static/tian/back.png" mode=""></image>
			<view class="text">{{$t('wallet.embody')}}</view>
			<image @click="toTime" class="time" src="../../static/img/time.png" mode=""></image>
		</view>
		<view style="height: 104rpx;"></view>
		<view class="item">
			<view class="title">{{$t('wallet.SelectiveBackbone')}}</view>
			<u-radio-group v-model="radiovalue1" activeColor="#ffb105">
				<u-radio v-for="(item, index) in radiolist" :key="index" :label="item.name" :name="item.id"
					@change="radioChange">
				</u-radio>
			</u-radio-group>
		</view>
		<view class="item">
			<view class="title">{{$t('wallet.address')}}</view>
			<u--input class="uInput" :placeholder="$t('wallet.longPaste')" border="surround" v-model="value" readonly></u--input>
		</view>
		<view class="item">
			<view class="title">{{$t('wallet.emAmount')}}</view>
			<view style="margin-top: 15px;">
				<u-input class="uInput" :placeholder="$t('wallet.leastTen')" v-model="num">
					<template slot="suffix">
						<view class="flex" @click="show = true">
							<img :src="baseurl + select.logo" alt="" style="width: 32rpx;height: 32rpx;">
							<view style="margin: 0 10rpx;">{{select.code}}</view>
							<img src="../../static/img/xia.png" alt="" style="width: 16rpx;height: 16rpx;">
						</view>
					</template>
				</u-input>
			</view>
		</view>
		<view class="flex" style="width: 90%;margin: 50rpx auto;">
			<text>{{$t('wallet.available')}}: {{select.balance}}</text>
			<text>{{$t('wallet.single')}}: {{select.draw_rate * 100}}%</text>
		</view>
		<view class="notice">
			<view>{{$t('wallet.careful')}}：</view>
			<view>•{{$t('wallet.minimumAmount')}}</view>
			<view>•{{$t('wallet.arrive48')}}</view>
			<!-- <view>•{{$t('wallet.dontSaturday')}}</view> -->
		</view>
		<view class="txBtn" @click="submit1">{{$t('wallet.Confirm')}}</view>
		<u-picker :show="show" keyName="code" cancelText="cancel" confirmText="OK"
			:columns="columns" @cancel="show = false" @confirm="confirm1"></u-picker>
		<view class="mask" v-if='show2'>
			<view
				style="overflow: hidden;width: 60%;;background-color: #ecf0f5;border-radius: 20rpx;padding:50rpx 100rpx">
				<view class="mask_title">{{$t('wallet.enterPassword')}}</view>
				<u--input class="uInput" :placeholder="$t('wallet.Please') +  $t('wallet.enterPassword')"
					border="surround" v-model="value1" type="password"></u--input>
				<view class="mask_btn">
					<view @click='show2 = false'>cancel</view>
					<view @click='submit'>OK</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		domain
	} from '../../config/domain.js'
	export default {
		data() {
			return {
				show: false,
				show2: false,
				columns: [],
				radiolist: [{
						name: 'BSC-20',
						disabled: false,
						id:1
					},
					{
						name: 'ERC-20',
						disabled: false,
						id:2
					},
					{
						name: 'TRC-20',
						disabled: false,
						id:3
					}, 
					// {
					// 	name: 'ARB',
					// 	disabled: false,
					// 	id:4
					// },
					// {
					// 	name: 'OP',
					// 	disabled: false,
					// 	id:5
					// }
				],
				radiovalue1: 1,
				value: uni.getStorageSync('userinfo').mobile,
				value1: '',
				num:'',
				baseurl:'',
				select:[],
				tload:1
			};
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('wallet.embody')
			});
			this.baseurl = domain;
			this.getlist()
		},
		methods: {
			getlist(){
				var url = domain + 'api/user/currencytx?type=' + this.radiovalue1;
				var mytype = 'get';
				var userinfo = uni.getStorageSync('userinfo');
				uni.request({
					url,
					method: mytype,
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
						'Lang':uni.getStorageSync('lang'),
						'AUTHORIZATION':userinfo.token,
					},
					success: res => {
						this.columns.push(res.data)
						this.select = res.data[0]
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			},
			confirm1(e) {
				this.select = e.value[0];
				this.show = false;
			},
			radioChange(e) {
				console.log(e)
				this.radiovalue1 = e;
				this.columns = [];
				this.getlist()
			},
			toTime() {
				uni.navigateTo({
					url: '/pages/index/cross?tab=2'
				})
			},
			back() {
				wx.navigateBack()
			},
			submit1(){
				if (!this.value) {
					uni.showToast({
						icon:'none',
						title:this.$t('first.title4')
					}); 
					return false;
				}
				if (!this.num) {
					uni.showToast({
						icon:'none',
						title:this.$t('wallet.minimumAmount')
					}); 
					return false;
				}
				this.show2 = true
			},
			submit(){
				if(!this.tload){
					return;
				}
				uni.showLoading({});
				this.tload = 0;
				if (!this.value1) {
					uni.showToast({
						icon:'none',
						title:this.$t('wallet.Please') + this.$t('wallet.enterPassword')
					}); 
					return false;
				}
				var url = domain + 'api/new_draw';
				var mytype = 'post';
				var userinfo = uni.getStorageSync('userinfo');
				var data={
					number:this.num,
					currency_id:this.select.id,
					address:this.value,
					memo:this.value1,
					currency_protocol_id:this.radiovalue1
				};
				uni.request({
					url,
					method: mytype,
					data,
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
						'Lang':uni.getStorageSync('lang'),
						'AUTHORIZATION':userinfo.token,
					},
					success: res => {
						uni.hideLoading();
						this.tload = 1;
						if(res.data.code == 0){
							uni.showToast({
								icon:'none',
								title:res.data.msg
							}); 
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.msg
							});
							this.show2 = false
							this.num = ''
							this.getlist()
						}
					},
					fail: (err) => {
						this.tload = 1;
						console.log(err)
						uni.hideLoading();
					},
					complete: () => {
						this.tload = 1;
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			}
		}
	}
</script>
<style>
	.header {
		width: 100%;
		height: 104rpx;
		position: fixed;
		background-color: #ecf0f5;
		display: flex;
		top: 0;
		left: 0;
		align-items: center;
		justify-content: space-between;
		z-index: 999;
	}

	.header image {
		width: 48rpx;
		height: 48rpx;
	}

	.header .text {
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #222;
	}

	.back {
		margin-left: 20rpx;
	}

	.time {
		margin-right: 20rpx;
	}
</style>
<style lang="scss">
	page {
		background-color: #ecf0f5;
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item {
		width: 90%;
		margin: 30rpx auto;

		.title {
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			font-size: 30rpx;
			color: #8287a2;
		}

		.u-radio-group {
			display: flex;
			flex-wrap: wrap;
			margin-top: 10rpx;

			.u-radio {
				width: 25%;
				margin: 10rpx;
			}
		}

	}

	.notice {
		width: 90%;
		margin: 0rpx auto;

		view {
			margin: 5rpx;
			font-size: 26rpx;
			color: #e22b2b;
		}
	}

	.txBtn {
		width: 90%;
		height: 96rpx;
		margin: 50rpx auto;
		background: #ffb105;
		border-radius: 50rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: #000;
		text-align: center;
		line-height: 96rpx;
	}

	.uInput {
		background-color: #fff;
		margin-top: 10rpx;
		width: 90%;
		border-radius: 20rpx;
	}

	.mask {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.mask_title {
			width: 100%;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.mask_btn {
			width: 100%;
			margin-top: 30rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				flex: 1;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				margin: 0 10rpx;
				border-radius: 20rpx;
			}

			view:nth-child(1) {
				background-color: #fff;
				color: #7c7c7c;
			}

			view:nth-child(2) {
				background-color: #222222;
				color: #fff;
			}
		}
	}
</style>